<template>
    <div class="main right-in">

        <el-row>
            <el-col :span="24" class="title_area">
                <h4>点餐详情</h4>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ name: 'orderList' }">点餐列表</el-breadcrumb-item>
                    <el-breadcrumb-item>点餐详情</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>

        <section class="inputs" v-if="order">
            <el-row :gutter="12">
                <el-col :span="6">
                    点餐号：{{ order.order_number }}
                </el-col>
                <el-col :span="6">
                    总金额：{{ total_amount }}
                </el-col>
                <el-col :span="6">
                    支付状态：{{ order.status }}
                </el-col>
                <el-col :span="6">
                    上菜状态：{{ order.order_status }}
                </el-col>
            </el-row>
        </section>

        <!--上菜区-->
        <el-row>上菜区</el-row>
        <!--列表-->
        <el-table :data="tableData"  border style="width: 100%;margin-top: 20px">
            <el-table-column label="商品图" >
                <template scope="scope">
                    <img :src="scope.row.information.product.img" style="width:64px;height:64px; margin-top:8px;" alt="">
                </template>
            </el-table-column>
            <el-table-column prop="total_amount" label="总金额"></el-table-column>
            <el-table-column prop="status" label="状态"></el-table-column>
            <el-table-column prop="num" label="数量"></el-table-column>
            <el-table-column prop="serve_num" label="完成数量"></el-table-column>
            <!--<el-table-column prop="return_num" label="退菜数量"></el-table-column>-->
            <el-table-column  label="操作" width="200">
                <template scope="scope">
                    <el-button v-if="scope.row.status == '未上菜'" type="default" size="small" @click="serveOrderProduct(scope.$index,tableData)">上菜</el-button>
                    <el-button v-if="order.status != '已支付'" type="default" size="small" @click="returningVegetables(scope.$index,tableData)">退菜</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--&lt;!&ndash;分页&ndash;&gt;-->
        <!--<el-pagination class="pagination"-->
                <!--background-->
                <!--layout="prev, pager, next"-->
                <!--pagesize="20"-->
                <!--:total="pagination.total_pages">-->
        <!--</el-pagination>-->


        <!--退菜区-->
        <el-row>退菜区</el-row>
        <!--列表-->
        <el-table :data="tableData2"  border style="width: 100%;margin-top: 20px">
            <el-table-column label="商品图" >
                <template scope="scope">
                    <img :src="scope.row.information.product.img" style="width:64px;height:64px; margin-top:8px;" alt="">
                </template>
            </el-table-column>
            <el-table-column prop="total_amount" label="总金额"></el-table-column>
            <el-table-column prop="status" label="状态"></el-table-column>
            <el-table-column prop="num" label="数量"></el-table-column>
        </el-table>

        <!--&lt;!&ndash;分页&ndash;&gt;-->
        <!--<el-pagination class="pagination"-->
                       <!--background-->
                       <!--layout="prev, pager, next"-->
                       <!--pagesize="20"-->
                       <!--:total="pagination2.total_pages">-->
        <!--</el-pagination>-->

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible1"
                width="30%"
                :before-close="handleClose">
            <span>请填写上菜信息</span>
            <span slot="footer" class="dialog-footer">
                <el-form>
                    <el-form-item label="上菜数量">
                        <el-input v-model="num1" type="number" :min="min1" :max="max1"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="confirmserveOrderProduct">确 定</el-button>
                </el-form>
            </span>
        </el-dialog>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <span>请填写退菜信息</span>
            <span slot="footer" class="dialog-footer">
                <el-form>
                    <el-form-item label="退菜数量">
                        <el-input v-model="num" type="number" :min="min" :max="max"></el-input>
                    </el-form-item>
                    <el-form-item label="退菜原因">
                        <el-input type="textarea" style="height: 80px;" v-model="reason" maxlength="150"></el-input>
                    </el-form-item>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmReturningVegetables">确 定</el-button>
                </el-form>
            </span>
        </el-dialog>



    </div>
</template>
<script>
  import url from '~/conf/settings'
  import { mapState } from 'vuex'

  export default {
    data() {
      return {//order_returns
        dialogVisible: false,
        dialogVisible1: false,
        order: {},
        total_amount: '',
        tableData:[],
        pagination: {
          total: 20,
          count: 20,
          current_page: 1,
          total_pages: 1
        },
        tableData2:[],
        pagination2: {
          total: 20,
          count: 20,
          current_page: 1,
          total_pages: 1
        },
        num: 1,//默认退一个
        reason: '',
        return_id : '',
        serve_id: '',
        max: 1,
        min: 1,
        num1: 1,
        min1: 1,
        max1: 1
      }
    },
    created(){
        this.orderDetail()
    },

    watch: {
      dialogVisible1: function (newValue, oldValue) {
        if(!newValue) {
          this.num1 = 1
        }
      },
      dialogVisible: function (newValue, oldValue) {
        if(!newValue) {
          this.num = 1
          this.reason = ''
        }
      }
    },

    methods: {

      orderDetail() {
        let params = {
          id: this.$route.params.id
        }
        this.$store.dispatch('orderDetail', params).then((ret)=>{
          this.order = ret.data.order
          this.total_amount = ret.data.total_amount.toFixed(2)

          this.tableData = ret.data.order_products
//          this.pagination.pagination  = ret.data.order_products.meta.pagination

          this.tableData2 = ret.data.order_returns
//          this.pagination.pagination2  = ret.data.order_returns.meta.pagination
        })
      },

      confirmserveOrderProduct() {
        let params = {
          id: this.serve_id,
          serve_num: this.num1
        }

        this.$store.dispatch('serveOrderProduct', params).then((ret) => {
          if(ret.success) {
            this.$notify({
              title: '成功',
              message: '上菜',
              type: 'success'
            });
            this.dialogVisible1 = false
            this.orderDetail()
          }else{
            this.$notify({
              title: '失败',
              message: '修改状态失败',
              type: 'error'
            });
          }
        })
      },

      serveOrderProduct(index, table) {
        var id = table[index].id
        this.serve_id = id
        this.max1 = table[index].num - table[index].serve_num
        this.dialogVisible1 = true
        return
      },

      confirmReturningVegetables() {

        let params = {
          return_num: this.num,
          reason: this.reason,
          id: this.return_id,
        }

        this.$store.dispatch('returningVegetables', params).then((ret) => {
          if(ret.success) {
            this.$notify({
              title: '成功',
              message: '退菜成功',
              type: 'success'
            });
            this.dialogVisible = false
            this.orderDetail()
          }else{
            this.$notify({
              title: '失败',
              message: '修改状态失败',
              type: 'error'
            });
          }
        })
      },

      returningVegetables(index, table) {
        var id = table[index].id
        this.return_id = id
        this.max = table[index].num
        this.dialogVisible = true
        return

      }
    },
  }
</script>

<style scoped>
    .inputs .el-row{ font-size: 14px; }
    .actions {
        text-align: right;
        padding-bottom: 14px;
    }
    /*.middle_panel .inputs .el-row{ margin: 12px 0; }*/
    .middle_panel .inputs .el-row .el-input{ margin:  0 0 12px 0; }
    .middle_panel .inputs .el-row .dbtn{ height:36px!important; line-height: 36px!important; padding:0 24px!important;  font-size: 14px; }
    .middle_panel .inputs{ min-height: 250px; }
</style>
<style>
    .inputs .el-badge .el-badge__content.is-fixed{top:10px!important;}
    .middle_panel .inputs .el-row .el-button--primary span{ color:#fff!important; }
    .fenpei .el-row{margin:12px 0;}
    .select_down{margin-top:12px;}
</style>
